import 'package:flutter/material.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/common/qxp_style.dart';
import 'package:full_display/page/login/login_page.dart';
import 'package:full_display/page/montage/cell_widgets/item_button.dart';
import 'package:full_display/page/montage/cell_widgets/item_select_image.dart';
import 'package:full_display/unit/asset_utils/asset_utils.dart';
import 'package:full_display/unit/navigation/navigation_util.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:full_display/unit/widgets/custom_progress/linear_progress_widget.dart';
import 'package:provider/provider.dart';
import 'montage_provider.dart';

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

class MontageWidget extends StatelessWidget {
  const MontageWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider(create: (_) => MontageProvider())],
      child: const MontagePage(),
    );
  }
}

class MontagePage extends StatefulWidget {
  const MontagePage({super.key});

  @override
  State<MontagePage> createState() => _MontagePageState();
}

class _MontagePageState extends State<MontagePage> {
  var _montageProvider = MontageProvider();

  @override
  Widget build(BuildContext context) {
    _montageProvider = context.watch<MontageProvider>();
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(color: ColorPlate.bg_black
                /*image: DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage('assets/images/splash.png'))*/
                ),
          ),
          Container(
            margin: EdgeInsets.only(left: 20.0.W, right: 20.0.W, top: 64.0.H),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: 154.0.H,
                    width: MediaQuery.of(context).size.width - 20 * 2,
                    padding: const EdgeInsets.only(
                      top: 16,
                      left: 21,
                      right: 21,
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: ColorPlate.transparent.withOpacity(0.05),
                    ),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "视频列表",
                              style:
                                  TextStyle(color: Colors.white, fontSize: 16),
                            ),
                            GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () {
                                _montageProvider.cleanPath();
                              },
                              child: Text(
                                "清空视频",
                                style: TextStyle(
                                    color: ColorPlate.blue, fontSize: 16),
                              ),
                            )
                          ],
                        ),
                        Container(
                          height: 0.5.H,
                          color: Colors.white,
                          margin: EdgeInsets.only(top: 14.0.H, bottom: 16.0.H),
                        ),
                        GridView.builder(
                          // reverse: true,
                          padding: EdgeInsets.zero,
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          itemCount: _montageProvider.imagePath.length,
                          itemBuilder: (con, index) {
                            return ItemSelectImage(
                                index: index,
                                imageList: _montageProvider.imagePath,
                                addImageCallBack: () {
                                  // NavigationUtil.getInstance().pushPage(context, "routeName", widget: LoginPage());
                                  _montageProvider.getPermission();
                                });
                          },
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 4, crossAxisSpacing: 12.0.W),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 12.0.H),
                    height: 190.0.H,
                    width: MediaQuery.of(context).size.width - 20 * 2,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.transparent.withOpacity(0.05),
                    ),
                    child: GridView.builder(
                      padding: EdgeInsets.zero,
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: 6,
                      itemBuilder: (con, index) {
                        return ItemButton(
                            str: _montageProvider.getStrByIndex(
                                index, MontageProvider.switchStr),
                            imageStr: _montageProvider.getImageByIndex(
                                index, MontageProvider.switchImageStr));
                      },
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, crossAxisSpacing: 40.0.W),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 20.0.W, right: 20.0.W),
                    margin: EdgeInsets.only(top: 12.0.H),
                    height: 40,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: ColorPlate.transparent.withOpacity(0.05),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "播放/暂停",
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                        Image.asset(AssetUtils.getAssetImage("icon_play")),
                      ],
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(left: 20.0.W),
                    height: 40.0.H,
                    child: const Text(
                      "亮度调节",
                      style: StandardTextStyle.buttonStyle,
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 21.0.W, right: 21.0.W),
                    alignment: Alignment.center,
                    height: 56.0.H,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: ColorPlate.transparent.withOpacity(0.05),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Image.asset(
                          AssetUtils.getAssetImage("icon_sun"),
                          width: 24.0.W,
                          height: 24.0.H,
                        ),
                        //progress：0-100
                        LinearProgressWidget(
                          endCallBack: (value) {
                            _montageProvider.setScreenBrightness(value);
                          },
                          callBack: (progress) {},
                        ),
                        Image.asset(
                          AssetUtils.getAssetImage("icon_sun"),
                          width: 24.0.W,
                          height: 24.0.H,
                        )
                      ],
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: 12.0.H),
                    padding: EdgeInsets.only(left: 20.0.W, right: 20.0.W),
                    height: 190.0.H,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.transparent.withOpacity(0.05),
                    ),
                    child: GridView.builder(
                      padding: EdgeInsets.zero,
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: MontageProvider.functionStr.length,
                      itemBuilder: (con, index) {
                        return ItemButton(
                            str: _montageProvider.getStrByIndex(
                                index, MontageProvider.functionStr),
                            imageStr: _montageProvider.getImageByIndex(
                                index, MontageProvider.functionImageStr));
                      },
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, crossAxisSpacing: 40.0.W),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: 12.0.H, bottom: 30.0.H),
                    padding: EdgeInsets.only(left: 20.0.W, right: 20.0.W),
                    height: 40.0.H,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.transparent.withOpacity(0.05),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Container(
                          margin: EdgeInsets.only(right: 10.0.W),
                          width: 20.0.W,
                          height: 20.0.H,
                          child:
                              Image.asset(AssetUtils.getAssetImage('icon_tip')),
                        ),
                        const Text(
                          "提示搜索到的设备数和已配置的设备数",
                          style: StandardTextStyle.buttonStyle,
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

/*class DraggableProgressIndicator extends StatefulWidget {
  @override
  _DraggableProgressIndicatorState createState() => _DraggableProgressIndicatorState();
}

class _DraggableProgressIndicatorState extends State<DraggableProgressIndicator> {
  double _progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _progress += details.delta.dx / num.parse('${context.size?.width}');
          _progress = _progress.clamp(0.0, 1.0);
        });
      },
      child: Stack(
        children: [
          LinearProgressIndicator(
            value: _progress,
          ),
          Positioned.fromRect(
            rect:Rect.fromLTWH(0.0, 2.0, _progress, 10),
            child: Center(
              child: Text('${(_progress * 100).toStringAsFixed(0)}%'),
            ),
          ),
        ],
      ),
    );
  }
}*/
